<template>
    <div>
      <div class="main-tab">
          <x-header id="header" :left-options="{showBack: false}" title="论坛" slot="header"></x-header>
          <div class="search">
            <search
              @result-click="resultClick"
              @on-change="getResult"
              :results="results"
              v-model="value"
              position="absolute"
              auto-scroll-to-top
              top="46px"
              @on-focus="onFocus"
              @on-cancel="onCancel"
              @on-submit="onSubmit">
            </search>
        </div>
        <div class="main-tab">
          <tab active-color="#AD2532" default-color="#9B9B9B" line-width="0">
            <tab-item selected active-class="active1"v-for="(item,index) in articlecatelist" :key="index" v-if="index === 0" @click.native="change(item.id)">{{item.categoryName}}</tab-item>
            <tab-item active-class="active1" v-for="(item,index) in articlecatelist" :key="index" v-if="index !== 0" @click.native="change(item.id)">{{item.categoryName}}</tab-item>
          </tab>
          <swiper auto style="width:100%" height="15rem" dots-class="custom-bottom" dots-position="center" >
            <swiper-item class="swiper-demo-img" v-for="(item, index) in list" :key="index">
              <img :src="item.imgUrl" class="slider">
            </swiper-item>
          </swiper>
          <div class="main">
            <div class="main-left">
              <group class="group" v-for="(item,index) in articlelist" :key="item.id" v-if="index %2 === 0 &&item.articleCategoryId === cateid" @click.native="articledetail(item.id)">
                  <div class="art-top">
                    <img :src="item.pictureArray" alt="">
                    <span class="content">{{item.content}}</span>
                  </div>
                  <div class="art-bottom">
                    <div class="bottom1">
                      <img :src="item.avatar" alt="">
                      <span class="name">{{item.nickname}}</span>
                    </div>
                    <div class="bottom2">
                      <span class="date">{{item.createTime.substring(0,10)}}</span>
                      <div class="yuedu">
                        <img src="../../../static/icon/yuedu-3.png" alt="">
                        <span class="num">{{item.readCount}}</span>
                      </div>
                    </div>
                  </div>
              </group>
            </div>
            <div class="main-right">
              <group class="group" v-for="(item,index) in articlelist" :key="item.id" v-if="index %2 === 1 &&item.articleCategoryId === cateid" @click.native="articledetail(item.id)">
                <div class="art-top">
                  <img :src="item.pictureArray" alt="">
                  <span class="content">{{item.nickname}}</span>
                </div>
                <div class="art-bottom">
                  <div class="bottom1">
                    <img :src="item.avatar" alt="">
                    <span class="name">{{item.nickname}}</span>
                  </div>
                  <div class="bottom2">
                    <span class="date">{{item.createTime.substring(0,10)}}</span>
                    <div class="yuedu">
                      <img src="../../../static/icon/yuedu-3.png" alt="">
                      <span class="num">{{item.readCount}}</span>
                    </div>
                  </div>
                </div>
              </group>
            </div>
          </div>
          <div class="release" @click="rel">
            <img src="../../../static/icon/forum-icon/Group 2 Copy.png">
          </div>
        </div>
      </div>
      <b-tabbar :value="2" />
    </div>

</template>

<script>
  import { Search,Flexbox, FlexboxItem } from 'vux'
  import bTabbar from '../../components/Btabbar'
  import { getSlider,getForumArticle,getArticleCateList } from '@/api/forum'

  export default {
        name: "forum",
    data(){
          return{
            list:[
            ],
            articlelist:[],
            articlecatelist:[],
            cateid:1,
          }
    },
    components:{
          Search,
          bTabbar,
          Flexbox,
          FlexboxItem,
    },
    methods:{
      resultClick (item) {
        window.alert('you click the result item: ' + JSON.stringify(item))
      },
      getResult (val) {
        console.log('on-change', val)
        this.results = val ? getResult(this.value) : []
      },
      onSubmit () {
        this.$refs.search.setBlur()
        this.$vux.toast.show({
          type: 'text',
          position: 'top',
          text: 'on submit'
        })
      },
      onFocus () {
        console.log('on focus')
      },
      onCancel () {
        console.log('on cancel')
      },
      articledetail(id){
        this.globalData.articleid=id;
        this.$router.push({
          name:'articledetail'
        })
      },
      rel(){
        this.$router.push({
          name:'release'
        })
      },
      getSliderList(){
        getSlider({}).then(res =>{
          console.log(res)
          this.list=res.data;
          console.log(this.list);
        })
      },
      getForumArticle(){
        getForumArticle({}).then(res =>{
          console.log(res)
          this.articlelist=res.data;
          console.log(this.articlelist)
        })
      },
      getArticleCateList(){
        getArticleCateList({}).then(res =>{
          console.log(res)
          this.articlecatelist=res;
        })
      },
      change(id){
        this.cateid=id;
        console.log(this.cateid)
      }
    },
    created(){
          this.getSliderList();
          this.getForumArticle();
          this.getArticleCateList();
    }
    }
</script>
<style scoped>
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .search{
    padding-top: 44.5px;
  }
  .active1{
    font-weight: bolder;
  }
  .main{
    width: 100%;
    padding-top: 13px;
    display: flex;
    flex-direction: row;
  }
  .main .main-left{
    width: 50%;
    display: flex;
    flex-direction: column;
  }
  .group{
    width: 11.79rem;
    margin-left: 1.07rem;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.03), 0 4px 8px 0 rgba(0,0,0,0.05);
  }
  .art-top{
    display: flex;
    flex-direction: column;
  }
  .art-top img{
    width: 11.79rem;
  }
  .content{
    margin-left: 0.71rem;
    margin-top: 0.71rem;
    margin-right: 0.71rem;
    margin-bottom: 0.71rem;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: justify;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .art-bottom{
    display: flex;
    flex-direction: column;
  }
  .bottom1{
    margin-left: 0.71rem;
    display: flex;
    margin-bottom: 0.35rem;
    flex-direction: row;
  }
  .bottom1 img{
    width: 1.79rem;
    height: 1.79rem;
    border-radius:50%;
    border: 1px solid #F4F4F4;
  }
   .name{
    font-size: 12px;
    color: #848484;
    letter-spacing: -0.29px;
    text-align: justify;
     margin-left: 0.35rem;
     margin-top: 0.5rem;
  }
   .bottom2{
     display: flex;
     justify-content: space-between;
     margin-left: 0.71rem;
     margin-bottom: 0.72rem;
   }
  .date{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: 0.14px;
    text-align: center;
  }
  .yuedu{
    display: flex;
    margin-right: 0.35rem;
  }
  .bottom2 img{
    width: 1.07rem;
    height: 1.21rem;
  }
  .num{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: 0.14px;
    text-align: center;
    margin-left: 0.35rem;
  }
  .release{
    width: 4.64rem;
    height: 4.64rem;
    background: #AD2532;
    box-shadow: 0 2px 4px 0 rgba(190,0,45,0.30), 0 4px 8px 0 rgba(173,37,50,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 4.78rem;
    right: 1.08rem;
  }
  .release img{
    width: 2.14rem;
    height: 2.14rem;
    margin-left: 1.14rem;
  }
  .slider{
    width: 100%;
    height: 14.16rem;
  }
</style>
